// src/pages/Dashboard.js
import React, { useEffect, useState } from 'react';
import { Card, Row, Col, Statistic, Table, DatePicker, Space } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import axios from 'axios';

const { RangePicker } = DatePicker;

const Dashboard = () => {
  const [stats, setStats] = useState({});
  const [orders, setOrders] = useState([]);
  const [dateRange, setDateRange] = useState([]);

  useEffect(() => {
    fetchDashboardData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dateRange]);

  const fetchDashboardData = async () => {
    try {
      // 模拟API请求
      const [statsRes, ordersRes] = await Promise.all([
        axios.get('/api/dashboard/stats', { params: { dateRange } }),
        axios.get('/api/orders/recent', { params: { limit: 5, dateRange } }),
      ]);
      console.log('dashboard',statsRes,ordersRes)

      setStats(statsRes.data);
      setOrders(ordersRes.data.orders);
    } catch (error) {
      console.error('获取仪表盘数据失败', error);
    }
  };

  const handleDateChange = (dates) => {
    setDateRange(dates?.map(date => date.format('YYYY-MM-DD')) || []);
  };

  const columns = [
    { title: '订单ID', dataIndex: 'id', key: 'id' },
    { title: '用户', dataIndex: 'user', key: 'user' },
    { title: '金额', dataIndex: 'amount', key: 'amount' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '日期', dataIndex: 'date', key: 'date' },
  ];

  return (
    <div>
      <Space style={{ marginBottom: 16 }}>
        <span>时间范围:</span>
        <RangePicker onChange={handleDateChange} />
      </Space>
      
      <Row gutter={16}>
        <Col span={6}>
          <Card>
            <Statistic
              title="今日销售额"
              value={stats.todaySales || 0}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="元"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="订单数量"
              value={stats.orderCount || 0}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="笔"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="用户数"
              value={stats.userCount || 0}
              precision={0}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="人"
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="转化率"
              value={stats.conversionRate || 0}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
              prefix={<ArrowDownOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
      </Row>

      <Card title="最近订单" style={{ marginTop: 16 }}>
        <Table dataSource={orders} columns={columns} pagination={false} />
      </Card>
    </div>
  );
};

export default Dashboard;